<template>
    <div class="artical">
        <div class="title">{{ essay?.title }}</div>
        <div class="author">{{ essay?.author }}</div>
        <div class="content">
            <template v-for="item in essay?.content" :key="item">
                <p class="paragraph">{{ item }}</p>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { api_get_essay } from "@/api/api_everyday";
    import { onMounted, ref } from "vue";
    import type { Essay } from "@/model/essay";
    import { useHomeStore } from "@/store/home";

    const essay = ref<Essay>();
    const homeStore = useHomeStore();
    essay.value = homeStore.essayData;

    const title = ref();
    const author = ref();
    const contentArr = ref();

    onMounted(() => {
        // getArtical()
    });
    const getArtical = async () => {
        const { data } = await api_get_essay();

        // 创建 DOMParser 对象
        // const parser = new DOMParser();
        // //
        // // // 解析 HTML 字符串为 DOM 对象
        // const doc = parser.parseFromString(data?.htmlStr, 'text/html');
        // console.log(doc)
        //
        // title.value = doc.querySelector('.articleTitle')?.textContent
        // author.value = doc.querySelector('.articleAuthorName')?.textContent
        // contentDomArr.value = doc.querySelectorAll('.articleContent p')

        // const parser = new DOMParser();

        title.value = data.title;
        author.value = data.author;
        contentArr.value = data.content;
    };

    // const parserStrToHtml = (htmlStr: any) => {
    //   // 创建 DOMParser 对象
    //   const parser = new DOMParser();
    //
    // // 解析 HTML 字符串为 DOM 对象
    //   const doc = parser.parseFromString(htmlStr, 'text/html');
    //   const titleDom = doc.querySelector('.articleTitle')
    //   const authorDom = doc.querySelector('.articleAuthorName')
    //   const contentDom = doc.querySelector('.articleContent')
    //
    //   return {titleDom, authorDom, contentDom}
    // }
</script>

<style scoped>
    .artical {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 800px;
        margin: 40vh auto 0;
        padding: 20px;
        border-radius: 10px;
        background: #282828;
        color: white;
    }
    .title {
        text-align: center;
        height: 80px;
        font-size: 20px;
        font-weight: bold;
        /* 字间距 */
        letter-spacing: 6px;
        line-height: 80px;
    }
    .author {
        padding-bottom: 20px;
        text-align: center;
        font-size: 12px;
        color: #eee;
    }
    .content {
        line-height: 26px;

        /*两端对齐*/
        text-align: justify;
        font-size: 14px;
        text-indent: 2em;
        letter-spacing: 2px;
    }
    .content p {
        padding: 6px 0;
    }
</style>
